<html>
  <head>
    <script type="text/javascript" src="jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="recipeentry.js"></script>

    <style type="text/css">
      input, textarea { display: block; margin-bottom: 15px;  width: 475px;}
      textarea { height: 225px; }
      label { font-weight: bold; }
      pre.output { border: 1px solid #aaa; padding: 5px; position: absolute; top: 57px; left: 500px; right: 10px; bottom: 10px; overflow: scroll;}
      label.output {position: absolute; top: 50px; left: 500px;}
    </style>
  </head>

  <body>
    <form method="GET" action="" onsubmit="return false;">
      <button id="clear">Clear</button>
      <a href="recipes.html">Go to Recipe Browser</a>
      <hr/>
      <label for="name">Name: </label><input type="text" id="name" name="name"></input>
      <label for="ing">Ingredients: </label><textarea id="ing" name="ing" rows="15" cols="50"></textarea>
      <label for="inst">Instructions: </label><textarea id="inst" name="inst" rows="15" cols="50"></textarea>
    </form>

    <label for="output" class="output">Copy the following into the beginning of <em>recipies.html</em> where indicated:</label>
    <pre class="output">
      <div id="pre">&lt;div class="recipe"&gt;</div>
      <div id="nameOut"></div>
      <div id="ingOut"></div>
      <div id="instOut"></div>
      <div id="post">&lt;/div&gt;</div>
    </pre>
  </body>
</html>
